{% load static %}
<!DOCTYPE html>
<!--STATUS OK-->
<html>
<head>
    <meta charset="UTF-8">
    <title>博物馆指南</title>
    <meta name="description">

    <link rel="stylesheet" type="text/css" href="https://bkssl.bdimg.com/static/museum/pkg/layout_71ff85a.css"/>
    <link rel="stylesheet" type="text/css" href="https://bkssl.bdimg.com/static/museum/pkg/museumIndex_cc840b1.css"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="shortcut icon" href="{% static '/images/logo.svg' %}" type="image/x-icon">
</head>
<body class="">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="wrap header">

</div>
<div class="wrap first-screen yahei">
    <div id="top-recommend-slider" class="fade-slider">
        <div class="slide-container">
            <a class="slide-item item-0 current"
               style="background:url({% static 'images/故宫.jpeg' %}) no-repeat center top;background-size:100%;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http:\/\/baikebcs.bdimg.com\/baike-other\/feiyi\/%E7%A7%A6%E7%9A%87%E5%85%B5%E9%A9%AC%E4%BF%91%E4%B8%80%E5%8F%B7%E5%9D%91%E5%85%A8%E6%99%AF%E8%83%8C%E6%99%AF%E5%9B%BE.PNG',sizingMethod='scale');z-index:2;"
               nslog-type="10500004" nslog-params='{"index": 0, "url":""}'
               href="" target="_blank"></a>
        </div>
    </div>
    <div class="firstRecommend content-wrap">
        <div class="top-recommend">

            <div class="museum-title">
                <div class="content">
                    <span class="title">博物馆指南</span>
                    <span class="slogan"><span class="word">在</span><span class="word">这</span><span
                            class="word">里</span><span class="word">见</span><span class="word">证</span><span
                            class="word">文</span><span class="word">明</span></span>
                    <div class="interval">
                        <div class="line"></div>
                        <div class="icon"></div>
                        <div class="line"></div>
                    </div>
                    <div class="statistics">
                        <span class="text">沐浴文明光辉，发现历史的奇迹，感受艺术的魅力</span>

                    </div>
                    <div class="user-statistics">
                        博物馆指南，引领您穿越时光，体验无尽的文明之旅
                    </div>
                </div>
                <div class="bg"></div>
            </div>
        </div>
        <span style="vertical-align:middle;"></span>
    </div>
</div>
<div class="wrap navigation-wrap yahei">
    <div class="content-wrap navigation">
        <a class="first" href="#精彩推荐" data-index="0">
            <span class="text">精彩推荐</span>
            <span class="hover"></span>
        </a>
        <a data-index="1" href="#博物馆检索">
            <span class="text">博物馆检索</span>
            <span class="hover"></span>
        </a>
        <a data-index="2" href="#文物展示">
            <span class="text">文物展示</span>
            <span class="hover"></span>
        </a>
    </div>
    <div class="bg"></div>
</div>
<div class="wrap hot-museum">
    <a name="精彩推荐" class="anchor"></a>
    <div class="content-wrap">
        <div class="block-title">
            精彩推荐
        </div>
        <div class="tabs">
            <a class="current">综合类</a>
            <a>纪念类</a>
            <a>专题类</a>
            <a>遗址类</a>
        </div>
        <div class="hot-museum-slider"></div>
    </div>
</div>
<div class="wrap museum-map">
    <a name="博物馆检索" class="anchor"></a>
    <div class="content-wrap">
        <div class="title">博物馆检索</div>
        <div id="museum-list-wrap" class="yahei museum-list-wrap">
            <div class="museum-list">
                <div class="search-box">
                    <div class="search-left">
                        <input class="search-input-left" autocomplete="off" type="text" placeholder="选择要查看的省份"
                               value="" id="iptSearch">
                        <a class="search-btn-left-down" id="searchButton"></a>
                    </div>
                    <div class="search-right">
                        <input class="search-input-right" autocomplete="off" type="text" placeholder="搜索名称" value=""
                               id="iptSearch">
                        <a class="search-btn-right"></a>
                    </div>
                </div>

                <ul class="province-list" style="display: none;">
                    {% for province in provinces %}
                        <li class="province-item">
                            <a id="province-link"
                               class="province-link">{{ province.province }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>

                <div class="result-con">
                    <div class="result-desc" id="result-desc">
                        <div class="address-icon"></div>
                        全国共收录&nbsp;<span class="num">{{ record_count }}</span>&nbsp;家博物馆
                    </div>
                    <div class="result-list" id="result-list">
                        {% for museum in museums_obj|slice:":14" %}
                            <a class="item with-digital-icon" nslog-type="10500008"
                               nslog-params="{&quot;museumId&quot;: 71}" target="_blank"
                               href="/app01/museuminfo/{{ museum.name }}">
                                <span class="text">{{ museum.name }}</span>
                            </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="pager">
                <div>
                    <td>
                        <button class="btn" id="prePage" type="button">上一页</button>
                    </td>
                    <td>
                        <input class="btn" id="currentPage" type="button" value="当前第1页">
                    </td>
                    <td>
                        <button class="btn" id="nextPage" type="button">下一页</button>
                    </td>
                </div>
            </div>
        </div>
        <div class="museum-relic">
            <div class="relic-one">
                <div class="relic-one-pillar"></div>
            </div>
            <div class="relic-two">
                <div class="relic-two-pillar"></div>
            </div>
            <div class="relic-three">
                <div class="relic-three-pillar"></div>
            </div>
        </div>
    </div>
</div>
<div id="carouselExample" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="wrap museum-event">
                <a name="文物展示" class="anchor"></a>
                <div class="content-wrap">
                    <div class="block-title">文物展示</div>
                    <div class="event-content">
                        <div class="slider" style="width: 980px;height: 700px;position: relative;">
                            <div class="item item-1 important"
                                 style="width: 980px;height: 700px;position: absolute;left: 0px;">
                                <div class="event-left" style="max-width: 500px">
                                    <a class="date">{{ antique.0.desc }}</a>
                                    <a class="title">{{ antique.0.name }}</a>
                                    <span class="description">{{ antique.0.summary }}</span>
                                </div>
                                <a class="event-right" style="max-width: 400px;max-height: 400px">
                                    <img src="{{ antique.0.img }}"/>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<div class="wrap footer">
    <div class="content-wrap">
    <div class="line">小组成员：赵文琳、叶晓萱、秦红、饶书琪</div>
    <div class="line">&copy; 2023 博物馆指南。版权所有。</div>
    </div>
</div>

<div class="share-wrap" style="opacity: 1;">
    <img class="share-circle" src={% static 'images/登录.svg' %}>
    <div class="share-list yahei">
         <a class="share-douban share-button" target="_blank" href="{% url 'user_page' %}">
            <span style="width:21px;height:22px;margin-top:6px;margin-left:14px;background:url(https://bkssl.bdimg.com/static/museum/widget/museumIndex/share/img/share_e8b1f8c.png) no-repeat 0 -40px"></span>
            <span class="text">个人主页</span>
        </a>

        <a class="share-qzone share-button" target="_blank" href="{% url 'register' %}">
            <span style="width:21px;height:22px;margin-top:6px;margin-left:14px;background:url(https://bkssl.bdimg.com/static/museum/widget/museumIndex/share/img/share_e8b1f8c.png) no-repeat 0 -40px"></span>
            <span class="text">注册</span>
        </a>
        <a class="share-sina share-button" target="_blank" style="" href="{% url 'login' %}">
            <span style="width:22px;height:22px;margin-top:7px;margin-left:13px;background:url({% static 'images/登录.svg' %}) no-repeat 0 -90px"></span>
            <span class="text">登录</span>
        </a>
    </div>
</div>
<script>with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://bkssl.bdimg.com/hunter/baike.js?st=' + ~(new Date() / 864e5)];</script>
<script type="text/javascript">
    console.log('hello')
    window.onload = function () {
        var currentPage = document.getElementById("currentPage").value;
        var intPage = parseInt(currentPage.replace(/[^\d]/g, " "));
        console.log(currentPage.replace(/[^\d]/g, " "))
        // 数据表
        var table = document.getElementById("trs");
        console.log(table.rows[0])
        // 页数
        var count = Math.ceil(table.rows.length / 10);
        var $loadBtn = document.getElementById("currentPage");
        var table_length = table.rows.length;
        var search = new Array(table_length);
        for (i = 0; i < table_length; i++) {
            search[i] = i;
        }
        var begin = (intPage - 1) * 10;
        for (var i = 0; i < table.rows.length; i++) {
            table.rows[i].style.display = 'none'
        }
        for (var r = begin; r < begin + 10; r++) {
            table.rows[r].style.display = '';
        }

        function prePage() {
            console.log('pre')
            // 到了第一页无法点击
            if (intPage <= 1) {
                alert("已是第一页！")
                // $("#prePage").attr("disabled", "disabled");
            } else {
                intPage--;
                currentPage = String(intPage);
                $loadBtn.value = "当前第" + currentPage + "页";
                paging();
            }
        }

        function nextPage() {
            console.log('next')
            // 到了最后一页无法点击
            if (intPage >= count) {
                alert("已是最后一页！")
                // $("#prePage").attr("disabled", "disabled");
            } else {
                intPage++;
                currentPage = String(intPage);
                $loadBtn.value = "当前第" + currentPage + "页";
                paging();
            }
        }

        function paging() {
            var begin = (intPage - 1) * 10;
            for (var i = 0; i < search.length; i++) {
                table.rows[search[i]].style.display = 'none'
            }
            for (var r = begin; r < begin + 10; r++) {
                if (r >= search.length) {
                    break;
                }
                table.rows[search[r]].style.display = '';
            }
        }

        function searchBtn() {
            var search_obj = [{{ search_res|safe }}][0]
            console.log(search_obj)
            for (var i = 1; i < table.rows.length; i++) {
                table.rows[i].style.display = 'none'
            }
            var td = table.rows[0].getElementsByTagName("td");
            console.log(td[1].innerText)
            {#td[1].innerText = search_obj.name;#}
            {#td[2].innerText = search_obj.grade;#}
            {#td[3].innerText = search_obj.quality;#}
            {#td[4].innerText = search_obj.free;#}
            intPage = 1;
            currentPage = String(intPage);
            $loadBtn.value = "当前第" + currentPage + "页";
            count = Math.ceil(search.length / 5)
            paging();
        }

        document.getElementById("prePage").addEventListener('click', prePage);
        document.getElementById("nextPage").addEventListener('click', nextPage);
        document.getElementById("searchBtn").addEventListener('click', searchBtn);
    }
</script>
<script type="text/javascript">
    //百度统计
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F55b574651fcae74b0a9f1cf9c8d7c93a' type='text/javascript'%3E%3C/script%3E"));

</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {

            const carousel = new bootstrap.Carousel(document.getElementById('carouselExample'));
            let antique_id =
            {{ antique.0.id }}

            const fetchNewContent = (direction) => {
                if (direction === 'prev') {
                    antique_id = antique_id - 1;
                } else if (direction === 'next') {
                    antique_id = antique_id + 1;
                }

                fetch('antique/' + antique_id)
                    .then(response => response.json())
                    .then(data => {
                        console.log(data);
                        const antiqueArray = JSON.parse(data.antique);
                        // 获取跑马灯容器
                        const carouselInner = document.querySelector('.carousel-inner');

                        // 获取现有的跑马灯项列表
                        const carouselItems = document.querySelectorAll('.carousel-item');

                        // 更新现有的跑马灯项内容
                        carouselItems.forEach((item, index) => {
                            const eventLeft = item.querySelector('.event-left');
                            const dateLink = eventLeft.querySelector('.date');
                            const titleLink = eventLeft.querySelector('.title');
                            const descriptionSpan = eventLeft.querySelector('.description');
                            const eventRight = item.querySelector('.event-right');
                            const img = eventRight.querySelector('img');

                            // 使用新的数据更新内容
                            dateLink.textContent = antiqueArray[index].desc;
                            titleLink.textContent = antiqueArray[index].name;
                            descriptionSpan.textContent = antiqueArray[index].summary;
                            img.src = antiqueArray[index].img;
                        });

                        // 不需要重新初始化 Carousel
                    })
                    .catch(error => console.error('Error fetching new content:', error));
            };

            // 左右切换按钮点击事件
            document.querySelector('.carousel-control-prev').addEventListener('click', () => {
                fetchNewContent('prev');
            });

            document.querySelector('.carousel-control-next').addEventListener('click', () => {
                fetchNewContent('next');
            });
        }
    )
    ;
</script>
{#省份选择和搜索框#}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const provinceLinks = document.querySelectorAll('.province-link');
        const searchButton = document.getElementById('searchButton');
        const provinceList = document.querySelector('.province-list');
        const nextPageButton = document.getElementById('nextPage');
        const prePageButton = document.getElementById('prePage');
        const resultList = document.getElementById('result-list');
        const resultdesc = document.getElementById('result-desc');
        const searchButtonByValue = document.querySelector('.search-btn-right')

        const perPage = 14;
        let currentPage = 1;
        let museumsObj = JSON.parse('{{ museums_obj|escapejs }}');
        let totalMuseums = museumsObj.length
        console.log(museumsObj)
        displayMuseums(1)

        searchButtonByValue.addEventListener('click', function () {
            let searchValue = document.querySelector('.search-input-right').value;
            currentPage = 1
            // 更新当前页数显示
            document.getElementById('currentPage').value = `当前第${currentPage}页`;

            fetch('search/' + searchValue)
                .then(response => response.json())
                .then(data => {
                    // 处理后端传回的数据
                    console.log(data);

                    // 清空原有内容
                    resultList.innerHTML = '';
                    resultdesc.innerHTML = '';

                    // 遍历JSON数据，创建需要动态加载的内容，并添加到指定部分
                    const addressIcon = document.createElement('div');
                    addressIcon.classList.add('address-icon');
                    resultdesc.appendChild(addressIcon);

                    const text = document.createElement('span');
                    text.classList.add('text');
                    text.textContent = searchValue + '共找到\u00A0';
                    resultdesc.appendChild(text);

                    const numSpan = document.createElement('span');
                    numSpan.classList.add('num');
                    numSpan.textContent = data.record_count;
                    resultdesc.appendChild(numSpan);

                    const museumText = document.createElement('span');
                    museumText.textContent = '\u00A0家相关博物馆';
                    resultdesc.appendChild(museumText);

                    museumsObj = JSON.parse(data.museums_obj);
                    const firstTenMuseums = museumsObj.slice(0, 14);
                    totalMuseums = museumsObj.length;

                    console.log(museumsObj, totalMuseums)

                    displayMuseums(1);
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        });

        provinceLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                event.stopPropagation(); // 阻止事件冒泡
                event.preventDefault(); // 阻止默认行为，即阻止页面跳转

                searchButton.classList.remove('search-btn-left-up');
                searchButton.classList.add('search-btn-left-down');
                provinceList.style.display = 'none';
                currentPage = 1
                // 更新当前页数显示
                document.getElementById('currentPage').value = `当前第${currentPage}页`;
                currentLink = event.target.textContent
                fetch(currentLink)
                    .then(response => response.json())
                    .then(data => {
                        // 在这里使用获取到的JSON数据来动态渲染到index.html文件中指定的部分
                        console.log(data)
                        // 清空原有内容
                        resultList.innerHTML = '';
                        resultdesc.innerHTML = '';

                        // 遍历JSON数据，创建需要动态加载的内容，并添加到指定部分
                        const addressIcon = document.createElement('div');
                        addressIcon.classList.add('address-icon');
                        resultdesc.appendChild(addressIcon);

                        const text = document.createElement('span');
                        text.classList.add('text');
                        text.textContent = data.province + '共收录\u00A0';
                        resultdesc.appendChild(text);

                        const numSpan = document.createElement('span');
                        numSpan.classList.add('num');
                        numSpan.textContent = data.record_count;
                        resultdesc.appendChild(numSpan);

                        const museumText = document.createElement('span');
                        museumText.textContent = '\u00A0家博物馆';
                        resultdesc.appendChild(museumText);

                        museumsObj = JSON.parse(data.museums_obj);
                        totalMuseums = museumsObj.length;

                        displayMuseums(1);
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            })
        })

        // 下一页按钮点击事件
        nextPageButton.addEventListener('click', function () {
            console.log('next')
            const totalPages = Math.ceil(totalMuseums / perPage);
            if (currentPage < totalPages) {
                currentPage++;
                displayMuseums(currentPage);
            }
        });

        // 上一页按钮点击事件
        prePageButton.addEventListener('click', function () {
            if (currentPage > 1) {
                currentPage--;
                displayMuseums(currentPage);
            }
        });

        // 展示博物馆信息
        function displayMuseums(page) {
            const startIndex = (page - 1) * perPage;
            const endIndex = page * perPage;
            const museumsToDisplay = museumsObj.slice(startIndex, endIndex);

            // 清空原有内容
            resultList.innerHTML = '';

            // 遍历并展示博物馆数据
            museumsToDisplay.forEach(museum => {
                const a = document.createElement('a');
                a.classList.add('item', 'with-digital-icon');
                a.setAttribute('nslog-type', '10500008');
                a.setAttribute('nslog-params', `{"museumId": ${museum.id}}`);
                a.setAttribute('target', '_blank');
                a.setAttribute('href', `/app01/museuminfo/${museum.name}`);

                const span = document.createElement('span');
                span.classList.add('text');
                span.textContent = museum.name;
                a.appendChild(span);
                resultList.appendChild(a);
            });

            // 更新当前页数显示
            document.getElementById('currentPage').value = `当前第${page}页`;
        }
    })
</script>

</body>
<script type="text/javascript" src="https://bkssl.bdimg.com/static/common/mod_3299a9f.js"></script>
<script type="text/javascript">require.resourceMap({
    "res": {
        "common:widget/lib/jquery/jquery.js": {"url": "https://bkssl.bdimg.com/static/common/widget/lib/jquery/jquery_9a76a39.js"},
        "common:widget/ui/vectorMap/vectorMap.js": {
            "url": "https://bkssl.bdimg.com/static/common/widget/ui/vectorMap/vectorMap_65c4e02.js",
            "deps": ["common:widget/lib/jquery/jquery.js"]
        },
        "museum:widget/component/nslog/nslog.js": {"url": "https://bkssl.bdimg.com/static/museum/widget/component/nslog/nslog_14a142e.js"},
        "museum:widget/museumIndex/chinaMap/chinaMap.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/chinaMap/chinaMap_377eb9e.js",
            "pkg": "museum:p3",
            "deps": ["common:widget/ui/vectorMap/vectorMap.js", "museum:widget/tooltip/tooltip.js"]
        },
        "museum:widget/museumIndex/hotMuseum/hotMuseum.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/hotMuseum/hotMuseum_0e31ada.js",
            "pkg": "museum:p3",
            "deps": ["museum:widget/slider/slider.js"]
        },
        "museum:widget/museumIndex/museumCalendar/museumCalendar.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/museumCalendar/museumCalendar_76efe74.js",
            "pkg": "museum:p3",
            "deps": ["museum:widget/calendar/calendar.js", "museum:widget/tooltip/tooltip.js"]
        },
        "museum:widget/museumIndex/museumList/museumList.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/museumList/museumList_212f709.js",
            "pkg": "museum:p3",
            "deps": ["museum:widget/component/nslog/nslog.js"]
        },
        "museum:widget/museumIndex/museumData/museumData.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/museumData/museumData_ee28b15.js",
            "pkg": "museum:p3",
            "deps": ["museum:widget/museumIndex/chinaMap/chinaMap.js", "museum:widget/museumIndex/museumList/museumList.js"]
        },
        "museum:widget/museumIndex/timeline/timeline.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/timeline/timeline_ff33e42.js",
            "pkg": "museum:p3"
        },
        "museum:widget/museumIndex/museumEvent/museumEvent.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/museumEvent/museumEvent_5563ff7.js",
            "pkg": "museum:p3",
            "deps": ["museum:widget/slider/slider.js", "museum:widget/museumIndex/timeline/timeline.js"]
        },
        "museum:widget/museumIndex/topRecommend/topRecommend.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/museumIndex/topRecommend/topRecommend_fcbb514.js",
            "pkg": "museum:p3"
        },
        "museum:widget/calendar/calendar.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/calendar/calendar_b8096c0.js",
            "pkg": "museum:p3"
        },
        "museum:widget/slider/slider.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/slider/slider_b5b5bc7.js",
            "pkg": "museum:p3"
        },
        "museum:widget/tooltip/tooltip.js": {
            "url": "https://bkssl.bdimg.com/static/museum/widget/tooltip/tooltip_275e50e.js",
            "pkg": "museum:p3"
        }
    }, "pkg": {"museum:p3": {"url": "https://bkssl.bdimg.com/static/museum/pkg/museumIndex_a576ba0.js"}}
});</script>
<script type="text/javascript" src="https://bkssl.bdimg.com/static/common/lib/jquery/jquery_2edcaf7.js"></script>
<script type="text/javascript" src="https://bkssl.bdimg.com/static/museum/pkg/museumIndex_a576ba0.js"></script>
<script type="text/javascript" src="https://bkssl.bdimg.com/static/common/widget/lib/jquery/jquery_9a76a39.js"></script>
<script type="text/javascript"
        src="https://bkssl.bdimg.com/static/common/widget/ui/vectorMap/vectorMap_65c4e02.js"></script>
<script type="text/javascript"
        src="https://bkssl.bdimg.com/static/museum/widget/component/nslog/nslog_14a142e.js"></script>
<script type="text/javascript">

    /*!function () {
        require.async("museum:widget/museumIndex/topRecommend/topRecommend.js", function (Slider) {
            var list = [{
                "title": "200\u4ebf\u50cf\u7d20\u5168\u666f\u4f53\u9a8c",
                "museumName": "\u79e6\u59cb\u7687\u5e1d\u9675\u535a\u7269\u9662",
                "description": "\u79e6\u59cb\u7687\u5175\u9a6c\u4fd1\u7ea4\u6beb\u91cd\u73b0",
                "imageUrl": "http:\\\/\\\/baikebcs.bdimg.com\\\/baike-other\\\/feiyi\\\/%E7%A7%A6%E7%9A%87%E5%85%B5%E9%A9%AC%E4%BF%91%E4%B8%80%E5%8F%B7%E5%9D%91%E5%85%A8%E6%99%AF%E8%83%8C%E6%99%AF%E5%9B%BE.PNG",
                "url": "http:\/\/baike.baidu.com\/museum\/qinshihuang",
                "wapImage": "http:\/\/baikebcs.bdimg.com\/baike-other\/feiyi\/640x480.png",
                "wapUrl": "https:\/\/wapbaike.baidu.com\/museum\/qinshihuang",
                "smallImage": "https:\/\/bkimg.cdn.bcebos.com\/pic\/6d81800a19d8bc3eb13541dfa0deb11ea8d3fd1fefd3?x-bce-process=image\/format,f_auto"
            }, {
                "title": "\u6cb3\u5357\u7701\u6587\u7269\u5730\u56fe",
                "museumName": "\u6cb3\u5357\u7701305\u5bb6\u535a\u7269\u9986",
                "description": "\u5168\u56fd\u9996\u4e2a\u7701\u7ea7\u6587\u7269\u5730\u56fe",
                "imageUrl": "https:\/\/bkimg.cdn.bcebos.com\/pic\/9922720e0cf3d7ca7bcb0c61d04aa9096b63f62403d5?x-bce-process=image\/format,f_auto",
                "url": "https:\/\/baikebcs.bdimg.com\/baike-museum3d\/henanditu\/index.html",
                "wapImage": "https:\/\/bkimg.cdn.bcebos.com\/pic\/730e0cf3d7ca7bcb0a46f5389c5c7c63f6246b6002d5?x-bce-process=image\/format,f_auto",
                "wapUrl": "https:\/\/baikebcs.bdimg.com\/baike-museum3d\/henanditu\/index.html",
                "smallImage": "https:\/\/bkimg.cdn.bcebos.com\/pic\/6a600c338744ebf81a4c4128fbacc02a6059252d09d5?x-bce-process=image\/format,f_auto"
            }, {
                "title": "\u6628\u65e5\u91cd\u73b0",
                "museumName": "\u5df4\u9ece\u5723\u6bcd\u9662",
                "description": "\u5168\u666f\u4f53\u9a8c\u6614\u65e5\u98ce\u91c7",
                "imageUrl": "https:\/\/bkimg.cdn.bcebos.com\/pic\/d0c8a786c9177f3e67094818529a2cc79f3df8dcf8d3?x-bce-process=image\/format,f_auto",
                "url": "https:\/\/baikebcs.bdimg.com\/baike-museum3d\/balishengmuyuan\/index.html",
                "wapImage": "https:\/\/bkimg.cdn.bcebos.com\/pic\/a044ad345982b2b7d0a238ec13f8dcef76094b362dc4?x-bce-process=image\/format,f_auto",
                "wapUrl": "https:\/\/baikebcs.bdimg.com\/baike-museum3d\/balishengmuyuan\/index.html",
                "smallImage": "https:\/\/bkimg.cdn.bcebos.com\/pic\/6609c93d70cf3bc79f3d7df9f355ada1cd11728bfcd3?x-bce-process=image\/format,f_auto"
            }];
            var slider = new Slider({
                container: $("#top-recommend-slider"),
                thumnail: $(".thumnail-list"),
                onChange: function (index) {
                    var text = $("#top-recommend-title");
                    var line1 = text.find(".line1");
                    var line2 = text.find(".line2");
                    var line3 = text.find(".line3");
                    text.stop().fadeOut(100, function () {
                        line1.text(list[index].title).attr("href", list[index].url);
                        line2.text(list[index].description).attr("href", list[index].url);
                        line3.text(list[index].museumName).attr("href", list[index].url);
                        var paramsString = JSON.stringify({index: index, url: list[index].url});
                        line1.attr("nslog-params", paramsString);
                        line2.attr("nslog-params", paramsString);
                        line3.attr("nslog-params", paramsString);
                    }).fadeIn(100);
                }
            });
            slider.play();

        });
    }();*/
    !function () {
        var navigation = $(".navigation-wrap");
        var top = navigation.offset().top;
        $(window).scroll(function () {
            var st = $(window).scrollTop();
            var h = 70;
            if (st >= top) {
                navigation.addClass("fixed");
                if (st < top + 30) {
                    h = 70 + top - st;
                } else {
                    h = 40;
                }
            } else {
                h = 70;
                navigation.removeClass("fixed");
            }
            navigation.height(h);
            navigation.find(".text").css("margin-top", Math.floor((h - 16) / 2));
            navigation.find("a").height(h);
        });
    }();
    !function () {
        require.async("museum:widget/museumIndex/hotMuseum/hotMuseum.js", function (HotMuseum) {
            var hotMuseum = new HotMuseum({
                dataList: {
                    "综合类":
                        [
                            {
                                "title": "中国国家博物馆",
                                "imageUrl": "https://img0.baidu.com/it/u=2652617542,3136684697&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=323",
                                "url": "/app01/museuminfo/中国国家博物馆/",
                                "abstract": "中国国家博物馆（National Museum of China）位于北京市中心天安门广场东侧，东长安街南侧，与人民大会堂东西相对称，是一座系统展示中华民族文化历史的综合性博物馆，也是世界上最大的博物馆之一。",
                                "exibitsNum": '140万',
                                "category": "综合类"
                            },
                            {
                                "title": "浙江省博物馆（浙江革命历史纪念馆）",
                                "imageUrl": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F6332208f-0520-42d0-8616-223e5d603cfe%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705991411&t=e77ec67cf77dbc160f9a4fafa17c0401",
                                "url": "/app01/museuminfo/浙江省博物馆（浙江革命历史纪念馆）/",
                                "abstract": "浙江省博物馆始建于1929年，初名“浙江省西湖博物馆”，1976年更名为“浙江省博物馆”。2006年，浙江革命历史纪念馆归并浙江省博物馆管理。2009年武林馆区（包括浙江革命历史纪念馆）建成对外开放。·",
                                "exibitsNum": '10万余',
                                "category": "综合类"
                            },
                            {
                                "title": "甘肃省博物馆",
                                "imageUrl": "https://img1.baidu.com/it/u=2503819047,973921050&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
                                "url": "/app01/museuminfo/甘肃省博物馆/",
                                "abstract": "汇集了甘肃从远古时期到近现代的珍贵文化遗存，馆藏文物特色鲜明，尤以彩陶、汉代简牍、汉唐丝绸之路珍品、佛教艺术、古生物化石和近现代革命史料等独具特色。",
                                "exibitsNum": '8万余',
                                "category": "综合类"
                            }],
                    "\u7eaa\u5ff5\u7c7b": [
                        {
                            "title": "天津梁启超纪念馆",
                            "imageUrl": "https://5b0988e595225.cdn.sohucs.com/images/20200129/a4365a9b74674ebc954cee71e690ef4e.jpeg",
                            "url": "/app01/museuminfo/天津梁启超纪念馆/",
                            "abstract": "天津梁启超纪念馆坐落于河北区民族路44、46号，2003年对外开放，是天津市首家名人旧居纪念馆。",
                            "exibitsNum": '-',
                            "category": "纪念类"
                        },
                        {
                            "title": "红四方面军总指挥部旧址纪念馆",
                            "imageUrl": "https://img2.baidu.com/it/u=2653179157,2152393174&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500",
                            "url": "/app01/museuminfo/红四方面军总指挥部旧址纪念馆/",
                            "abstract": "红四方面军总指挥部旧址纪念馆位于四川省通江县城，馆舍系明清建筑，古为文庙、学宫，建筑呈四合院布局，造型凝重，气势宏伟，为全国重点文物保护单位。",
                            "exibitsNum": '7800余',
                            "category": "\u7eaa\u5ff5\u7c7b"
                        },
                        {
                            "title": "大别山革命历史纪念馆",
                            "imageUrl": "https://img0.baidu.com/it/u=295024310,3409989538&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                            "url": "/app01/museuminfo/大别山革命历史纪念馆/",
                            "abstract": "大别山革命历史纪念馆位于六安市中心，是国家为纪念鄂豫皖革命根据地、中国革命策源地、人民军队发源地、刘邓大军千里挺进大别山等重大历史事件和革命先烈而建造的重要标志性纪念场所。",
                            "exibitsNum": '13',
                            "category": "\u7eaa\u5ff5\u7c7b"
                        }],
                    "\u4e13\u9898\u7c7b": [
                        {
                            "title": "中国航空博物馆",
                            "imageUrl": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F60f5f454-0373-4222-809a-69f8ffc5b455%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705990638&t=42bb4ca19b775d5450abcf7d38d30447",
                            "url": "/app01/museuminfo/中国航空博物馆/",
                            "abstract": "中国航空博物馆于1989年11月11日正式对外开放，是目前亚洲第一的大型航空类专业博物馆，国家一级博物馆、4A级旅游景区，全国爱国主义、科普和国防教育基地，北京市红色旅游景区，是空军的“窗口”单位。",
                            "exibitsNum": '376',
                            "category": "专题类"
                        },
                        {
                            "title": "陕西自然博物馆",
                            "imageUrl": "https://img0.baidu.com/it/u=2781630829,2355830769&fm=253&fmt=auto&app=120&f=JPEG?w=691&h=406",
                            "url": "/app01/museuminfo/陕西自然博物馆/",
                            "abstract": "陕西自然博物馆是陕西投资集团有限公司投资建设的公益性事业单位，现为国家二级博物馆、国家AAAA级旅游景区，并荣获“全国科普教育基地”等多项荣誉称号。",
                            "exibitsNum": '-',
                            "category": "\u4e13\u9898\u7c7b"
                        },
                        {
                            "title": "清华大学艺术博物馆",
                            "imageUrl": "https://tse1-mm.cn.bing.net/th/id/OIP-C.PNrYMITSj9BcGEED8_X9AwHaE5",
                            "url": "/app01/museuminfo/清华大学艺术博物馆/",
                            "abstract": "馆内藏品绝大部分来自于清华美院旧藏。目前藏品来源为旧藏、捐赠、价购、拨交。基本陈列以瓷器、织绣、家具、书画四个馆藏展览为主，辅以境外特展、艺术家回顾展、捐赠展等临时展览。",
                            "exibitsNum": '22915',
                            "category": "\u4e13\u9898\u7c7b"
                        }],
                    "\u9057\u5740\u7c7b": [
                        {
                            "title": "南京大报恩寺遗址博物馆",
                            "imageUrl": "https://tse2-mm.cn.bing.net/th/id/OIP-C.Ki4ehJwWHjsuBzOZ7FVGgAHaE7",
                            "url": "/app01/museuminfo/南京大报恩寺遗址博物馆/",
                            "abstract": "博物馆中保护性展示了大报恩寺遗址中的千年地宫和珍贵画廊，以及从地宫中出土的石函、铁函、七宝阿育王塔、金棺银椁等世界级国宝，是夫子庙秦淮风光带重要组成部分。",
                            "exibitsNum": '-',
                            "category": "\u9057\u5740\u7c7b"
                        },
                        {
                            "title": "洛阳隋唐大运河文化博物馆",
                            "imageUrl": "https://tse3-mm.cn.bing.net/th/id/OIP-C.h7jtaGDIKadohjkqFVHEVQHaFj",
                            "url": "/app01/museuminfo/洛阳隋唐大运河文化博物馆/",
                            "abstract": "隋唐大运河文化博物馆是国家“十三五”重大文化工程和大运河国家文化公园重要节点工程，是洛阳乃至河南融入国家大运河文化带建设战略的重要载体。",
                            "exibitsNum": '-',
                            "category": "\u9057\u5740\u7c7b"
                        },
                        {
                            "title": "周口店北京人遗址博物馆",
                            "imageUrl": "https://tse3-mm.cn.bing.net/th/id/OIP-C.MoywjjHfMCbN0Su7HUgNwQHaFj",
                            "url": "/app01/museuminfo/周口店北京人遗址博物馆/",
                            "abstract": "周口店国家考古遗址公园内还保存着重要的古人类遗址8处，周口店遗址是全国首批重点文物保护单位，第一批世界文化遗产，全国首批国家考古遗址公园。",
                            "exibitsNum": '7449',
                            "category": "\u9057\u5740\u7c7b"
                        }]
                }
            });
        });

    }();

    !function () {
        $(window).resize(function () {
            var width = $(window).width();
            if (width < 1140) {
                $(document.body).addClass("small-screen");
            } else {
                $(document.body).removeClass("small-screen");
            }
        });
        var setOpacity = function () {
            var scrollTop = $(window).scrollTop();
            var opacity = 1.0;
            if (scrollTop <= 305) {
                opacity = 0.7;
            }
            $(".share-wrap").animate({
                opacity: opacity
            }, 100);
        };
        $(window).bind("scroll", function () {
            setOpacity();
        });

        setOpacity();
    }();

</script>
<script>
    // 获取按钮和输入框的引用
    const searchButton = document.getElementById('searchButton');
    const inputField = document.getElementById('iptSearch');
    const provinceList = document.querySelector('.province-list');

    // 监听按钮的点击事件
    searchButton.addEventListener('click', function () {
        // 切换按钮的类名
        if (searchButton.classList.contains('search-btn-left-down')) {
            searchButton.classList.remove('search-btn-left-down');
            searchButton.classList.add('search-btn-left-up');
            provinceList.style.display = 'block';
        } else {
            searchButton.classList.remove('search-btn-left-up');
            searchButton.classList.add('search-btn-left-down');
            provinceList.style.display = 'none';
        }
        // 其他操作...
    });

</script>
<style>
    .province-link {
        text-decoration: none;
        color: black;
    }

    .btn {
        display: inline-block;
        cursor: pointer;
        width: 100px;
        height: 49px;
        font-size: 14px;
        padding: 0 10px;
        color: #9E9E9E;
        background-color: transparent;
    }

    .btn:hover {
        color: #64AFFA
    }
</style>
</html>
